<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
</head>
<style>
    .d1 {
        width: 200px;
        height: 200px;
        background-color: #0aa1ed;
        border:5px solid #f00;
        border-top:5px dashed #f00;
        border-radius:10px
    }
    .d2 {
        width: 200px;
        height: 200px;
        background-color: pink;

        border:5px solid magenta;
        padding-left:50px;
        padding-top:50px;
        margin:50px;

        /*将盒子模型计算方案切换成边框盒子：
        无论是加内间距还是边框，元素大小都不会改变，都算在预设的宽高之内*/
        /*box-sizing: border-box;*/


    }
    span {
         border: 3px solid #f00;
     }
    .s2 {
        /*行内元素垂直方向的内外间距都不生效，不建议使用*/
        padding: 50px;
        margin: 50px;
    }
</style>
<body>
  <div class="d1"></div>
  <div class="d2">内间距测试</div>
  <hr>
  <span>span1</span>
  <span class="s2">span2</span>
  <span>span3</span>
</body>
</html>